<template>
	<view class="reg_wrapper pageBg">
		<view class="tx1" v-if="!showResult">{{method == 'mobile' ? '手机找回密码' : '邮箱找回密码'}}</view>
		<view class="t_box" v-if="!showResult">
			<text :class="utype==2?'swb active':'swb'" @click="utype = 2">求职者会员</text>
			<text :class="utype==1?'swb active':'swb'" @click="utype = 1">企业会员</text>
		</view>
		<view v-if="!showResult">
			<FindPwdByMobile v-if="method == 'mobile'" :utype="utype" @changeMethod="changeMethod"
				@handlerFinish="handlerFinish"></FindPwdByMobile>
			<FindPwdByEmail v-if="method == 'email'" :utype="utype" @changeMethod="changeMethod"
				@handlerFinish="handlerFinish"></FindPwdByEmail>
		</view>
		<view class="bottom_tip" v-if="!showResult">
			<view>上面的方式都不可用？</view>
			<view class="tip_txt">
				你还可以电话联系我们<text class="tel">{{ contact_tel }}</text>
			</view>
		</view>
		<view class="result_wrapper" v-if="showResult">
			<view class="res_ico">重置密码成功</view>
			<view class="res_txt">下次登录请使用新密码登录</view>
		</view>
		<view class="reg_wrapper_res" v-if="showResult">
			<u-button type="primary" shape="circle" @click="handleClick(loginUrl)">重新登录</u-button>
		</view>
	</view>
</template>

<script>
	import FindPwdByMobile from './components/FindPwdByMobile'
	import FindPwdByEmail from './components/FindPwdByEmail'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'FindPwd',
		components: {
			FindPwdByMobile,
			FindPwdByEmail
		},
		data() {
			return {
				method: 'mobile',
				utype: 1,
				showResult: false,
				loginUrl: ('/member/Login?utype=' + (this.utype == 1 ? 'company' : 'personal'))
			}
		},
		watch: {
			$Route(to, from) {
				console.log(to)
				// this.utype = to.params.utype
			}
		},
		computed: {
			...mapState({
				contact_tel: state => state.config.contact_tel
			})
		},
		mounted() {
			this.utype = this.$Route.query.utype
		},
		methods: {
			handleClick(path) {
				uni.navigateTo({
					url: path
				})
			},
			changeMethod(method) {
				this.method = method
			},
			handlerFinish() {
				this.showResult = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reg_wrapper {
		padding: 0 42rpx;
	}

	.tx1 {
		padding: 110rpx 0 73rpx;
		font-size: 46rpx;
		color: #2A2A2A;
		font-weight: 800;
	}

	.t_box {
		display: flex;
		align-items: center;
		margin-bottom: 23px;

		.swb {
			font-size: 34rpx;
			color: #565656;
			margin-right: 60rpx;
			position: relative;
			font-weight: 500;

			&.active {
				color: #266DFF;
				font-size: 34rpx;
				font-weight: bold;

				&::before {
					content: '';
					width: 50rpx;
					height: 4rpx;
					background: #266DFF;
					position: absolute;
					bottom: -15rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}

	.bottom_tip {
		margin: 160rpx auto 0;
		font-size: 26rpx;
		text-align: center;
		color: #777777;

		.tip_txt {
			margin-top: 10rpx;
		}

		.tel {
			color: #266DFF;
		}
	}

	.result_wrapper {
		padding-top: 230rpx;
		text-align: center;

		.res_ico {
			display: inline-block;
			font-size: 48rpx;
			padding: 16rpx 0 16rpx 100rpx;
			color: #333333;
			margin-bottom: 20rpx;
			background-image: url(./static/img/success.png);
			background-position: 0 center;
			background-repeat: no-repeat;
			background-size: 80rpx;
		}

		.res_txt {
			font-size: 30rpx;
			color: #666666;
			margin-top: 20rpx;
		}
	}

	.reg_wrapper_res {
		width: 646rpx;
		margin: 130rpx auto 0;
	}
</style>
